<!DOCTYPE HTML>
<html>
   <head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>知果汇</title>
		<link href="_CSS_/bootstrap.min.css" rel="stylesheet">
		<link href="_CSS_/simple-line-icons.css" rel="stylesheet">
		<link href="_CSS_/font-awesome.min.css" rel="stylesheet">
		<link href="_CSS_/jasny-bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="_CSS_/nanoscroller.css">
		<link href="_CSS_/style.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="_CSS_/jquery-ui.css">
		<!--[if lt IE 9]>
		  <script src="_JS_/html5shiv.min.js"></script>
		  <script src="_JS_/respond.min.js"></script>
		<![endif]-->
		<style type="text/css">
		    body{background-color: #ffffff;}
			.row{margin-left: 0px;margin-right: 0px;}
			.radio-box{display:inline-block;width: 64px;}
			.formControls{padding-right:50px; position: relative;}
			.textarea {height: 100px;resize: none;font-size: 14px;padding: 4px;}
            .textarea-numberbar {position: absolute;right: 70px;bottom: 5px;z-index: 1;margin-bottom: 0;}
            .upload-btn {width: 290px;height: 200px;margin: 0;border: 1px solid #a9a9a9;}
            .upload-btn img{
				display: block;
				width: 79px;
				height: 72px;
				margin-top: 60px;
				margin-left: 109px;

			}
			.upload-btn input{
				position: absolute;
			    top: 0;

			    margin: 0;
			    width: 290px;
			    height: 200px;
			    border: none;
			    opacity: 0;
			    filter: alpha(opacity=0);
			    cursor: pointer
			}
			.upload-img{width:290px;height: 200px;}
			.upload-img p {
				width: 290px;
			    margin-top: -50px;
			    text-align: center;
			}
			.img-info img{
				width: 290px;
				height: 200px;
			}
			.file-panel {
			    position: absolute;
			    display: none;
			    width: 290px;
			    height: 200px;
			    top: 0;
			    overflow: hidden;
			    z-index: 300;
			}
			.cancel {
			    width: 290px;
			    height: 200px;
			    background-color: rgba( 0, 0, 0, 0.5 );
			}
			 .table-btn,.table-btn:hover,.table-btn:focus{color: #ffffff;}
		</style>
    </head>
	<body>
	<article class="page-container">
		<form class="form form-horizontal" id="form-admin-add" method="post" enctype="multipart/form-data">
			<!--<div class="row cl">-->
				<!--<label class="form-label col-xs-4 col-sm-3">视频类别：</label>-->
				<!--<div class="formControls col-xs-8 col-sm-9"> -->
				    <!--<span class="select-box">-->
						<!--<select class="select" name="adminRole" size="1" style="width:150px;">-->
							<!--<option value="0">全部</option>-->
							<!--<option value="1">专利评议</option>-->
							<!--<option value="2">专利维权</option>-->
							<!--<option value="3">专利托管</option>-->
							<!--<option value="4">专利代理</option>-->
							<!--<option value="5">政策应用</option>-->
							<!--<option value="6">设计开发</option>-->
							<!--<option value="7">其他</option>-->
						<!--</select>-->
					<!--</span> -->
				<!--</div>-->
			<!--</div>-->
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">视频名称：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" autocomplete="off"  placeholder="视频名称" id="videoname" name="videoname">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">视频简介：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<textarea name="abstract" cols="" rows="" class="textarea"  placeholder="视频简介" dragonfly="true" ></textarea>
				</div>
			</div>

			<!--<div class="row cl">-->
				<!--<label class="form-label col-xs-4 col-sm-3">上传图片：</label>-->
				<!--<div class="formControls col-xs-8 col-sm-9"> -->
				    <!--<div class="upload-img">-->
						<!--<div class="img-info">-->
							<!--<img src=""/>-->
							<!--<div class="file-panel">-->
								<!--<div title="删除图片" class="cancel">-->
									<!--<a class="btn table-btn" style="font-size:18px;margin-top:170px;margin-left:250px;" title="删除图片" href="javascript:;">-->
										<!--<i class="fa fa-trash-o"></i>-->
									<!--</a>-->
								<!--</div>-->
							<!--</div>-->
						<!--</div>-->
						<!--<div class="upload-btn" style="display: none;">-->
							<!--<img src="_IMG_/upload.jpg">-->
							<!--<input type="file" name="img" id="file_img" onchange="previewImage(this,1)" accept="image/gif, image/jpeg, image/png" />-->
						<!--</div>-->
						<!--<p style="display: none;">上传图片大小不超过2M</p>-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">上传视频：</label>
				<div class="formControls col-xs-8 col-sm-9"> 
				    <input type="file" id="file_video" name="file" value="选择图片" accept="video/mp4,application/ogg, audio/ogg,video/webm" />
				    <input class="up-btn" style="display: none;margin-top: 10px;" type="button" value="上传" onclick="upload()"/>  
				    <p id="info"></p>
				    <p class="up-progress" style="display: none;">上传进度：<span id="video_jd"></span></p>			    
				    <div class="progress-nav" style="width: 200px;height: 20px;border: 1px solid #333333;display: none;">
				        <span id="par" style="display: block;height: 20px;background: #333333;width: 0px;"></span>
				    </div> 
				   <video id="video"  controls="controls" style="width: 290px;height: 200px;"> </video>
					<input  type="hidden" name="content" id="video_url" >
					<input  type="hidden" name="video_status" id="video_status" >
				</div>
			</div>


			<div class="row cl" style="margin-bottom: 20px;">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary radius" type="button"  onclick="ajax()" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
					<input class="btn btn-cancel radius" style="color: #ffffff;background-color: #a0a0a0;" type="button"   value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
				</div>
			</div>
		</form>
	</article>

    <script src="_JS_/jquery.min.js"></script>
    <script src="_JS_/bootstrap.min.js"></script>
    <script src="_JS_/jasny-bootstrap.min.js"></script>
    <script src="_JS_/jquery.slimscroll.min.js"></script>
    <script src="_JS_/jquery.nanoscroller.min.js"></script>
    <script src="_JS_/metismenu.min.js"></script>
    <script src="_JS_/float-custom.js"></script>
    <script type="text/javascript" src="_JS_/layer/layer.js"></script>
    <script type="text/javascript" src="_JS_/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="_JS_/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="_JS_/jquery.validation/1.14.0/messages_zh.min.js"></script>
	<script type="text/javascript" src="_JS_/jquery.form.js"></script>

	<script type="text/javascript">
		$('.img-info').hover(function(){
			$(this).find(".file-panel").show();
		},function(){
			$(this).find(".file-panel").hide();
		});
		$(".cancel").on("click",function(){
			$('#file_img').val("");
			$(this).parents('.upload-img').find(".upload-btn").show();
			$(this).parents('.upload-img').find(".upload-img p").show();
			$(this).parents(".img-info").remove();

		});
		var url=window.location.href;
		v_id = url.split("#")[1];
	/*textarea 字数限制*/
	function textarealength(obj,maxlength){
		var v = $(obj).val();
		var l = v.length;
		if( l > maxlength){
			v = v.substring(0,maxlength);
			$(obj).val(v);
		}
		$(obj).parent().find(".textarea-length").text(v.length);
	}
	$(function(){
		//新闻详情加载
		$.ajax({
			type: "get",
			url: "{:url('api/video/video_detail')}",
			dataType: 'jsonp',
			jsonp:'callback',
			data:{'id':v_id},
			success: function (msg) {
				if(msg.code == 200){
					//编辑器准备好之后加载内容
					$('#videoname').val(msg.data.v_title);
					$('#video_id').val(msg.data.id);
					$('.textarea').val(msg.data.v_abstract);
					//$('.img-info').find('img').attr("src","_SRC_/Cover/"+msg.data.pic);
					$('#video').attr("src",msg.data.content);
				}
				if(msg.code==1000){
					layer.msg('获取信息不成功!',{icon:1,time:2000});
				}
			}
		});
		$("#form-admin-add").validate({
			rules:{
				videoname:{
					required:true,
					minlength:4,
					maxlength:16
				},
				
			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid",
//			submitHandler:function(form){
//				//$(form).ajaxSubmit();
//				var index = parent.layer.getFrameIndex(window.name);
//				parent.$('.btn-refresh').click();
//				parent.layer.close(index);
//			}
		});

	});
		/*取消按钮*/
		$('.btn-cancel').on('click',function(){
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		});



		/*Ajax提交*/
		function ajax() {
			var name = $('#videoname').val();
			var abstract = $("textarea[name='abstract']").val();
			//var img=$('.img-info').find('img').attr('src');
			var video_url=$('#video_url').val();
			var video_status=$('#video_status').val();
			if(name==""||abstract==""){
				layer.msg("请填写完整");
				return false;
			}
			if(video_url==""&&video_status==1){
				layer.msg("请静候上传完毕");
				return false;
			}
			$.ajax({
				url:"/index.php/api/video/video_edit",
				type: "post",
				dataType: "json",
				data:{
					"id":v_id,
					"videoname":name,
					"abstract":abstract,
					"content":video_url
				},
				beforeSubmit: function(){
					var index = layer.load(1, {shade: [0.8,'#333']});
				},
				success: function(msg){
					layer.closeAll();
					if(msg.code==200){
						layer.msg(msg.message);
						//parent.window.location.reload();
						parent.video_list(1);
					}
				},
				error: function(){
					layer.closeAll();
					layer.msg('网络错误');
				}
			});
		}

	var totalSize = 0;
	//绑定所有type=file的元素的onchange事件的处理函数
	$('#file_video').change(function() {
		var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
		name = file.name;
		size = file.size;
		type = file.type;
		url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片
		//$(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);
		totalSize += size;
		sizeM=(totalSize/(1024*1024)).toFixed(2);
		$("#info").html("总大小: " +sizeM + "MB");
		$("#video").attr("src",url);
		$(".up-btn").show();
		$(".up-progress").show();
		$(".progress-nav").show();
	});
	function upload() {
		$("#video_status").val(1);
		//定时器制造进度条
		var i=0;
		var IntervalName = setInterval(function () {
			//需要定时执行的代码
			i++;
			var percent=i*10;
			$('#video_jd').html(percent.toFixed(2) + "%");
			$('#par').css('width',percent.toFixed(2) + '%');
			if (i == 8) {
				//删除定时器IntervalName 如果上面不定义，你就不知道要清除哪个定时器。
				//因为你可能在特定的条件想停止定时器。
				clearInterval(IntervalName);
			}
		}, 3000);
		//创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
		var formData = new FormData($('form')[0]);
		//ajax异步上传
		$.ajax({
			url: "/index.php/api/video/video_upload",  //上传地址
			type: "POST",
			data: formData,
			dataType: "json",
//			xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
//				myXhr = $.ajaxSettings.xhr();
//				if(myXhr.upload){ //检查upload属性是否存在
//					//绑定progress事件的回调函数
//					myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
//				}
//				return myXhr; //xhr对象返回给jQuery使用
//			},
			success: function(result){
				if(result.code==200){
					$("#video_url").val(result.data);
					$(".up-btn").hide();
					clearInterval(IntervalName);
					$('#video_jd').html("100%");
					$('#par').css('width','100%');
					layer.msg(result.message);
				}


			},
		contentType: false, //必须false才会自动加上正确的Content-Type
		processData: false //必须false才会避开jQuery对 formdata 的默认处理
		});
	}
	//上传进度回调函数：
	function progressHandlingFunction(e) {
		if (e.lengthComputable) {
		var percent = e.loaded/e.total*100;
		//上传进度
		$('#video_jd').html(percent.toFixed(2) + "%");
		$('#par').css('width',percent.toFixed(2) + '%');
		}
	}

		/* 图片预览*/
		function previewImage(obj,num){
			var filepath=$(obj).val();
			fileObj = document.getElementById('file_img');
			value = window.URL.createObjectURL(fileObj.files[0]);
			file_size = obj.files[0].size;
			size = file_size / 1024;
			if (size > 1024*2) {
				$('#file_img').val("");
				layer.alert('上传图片不得大于2MB', {
					closeBtn: 0
				});
			} else {
				$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div title="删除图片" class="cancel"><a class="btn table-btn" style="font-size:18px;margin-top:170px;margin-left:250px;" title="删除图片" href="javascript:;"><i class="fa fa-trash-o"></i></a></div></div></div>');
				$(obj).parent(".upload-btn").hide();
				$(obj).parents(".upload-img").children('p').hide();

				$('.img-info').hover(function(){
					$(this).find(".file-panel").show();
				},function(){
					$(this).find(".file-panel").hide();

				});
				$(".cancel").on("click",function(){
					$('#file'+num).val("");
					$(this).parents('.upload-img').find(".upload-btn").show();
					$(this).parents('.upload-img').find(".upload-img p").show();
					$(this).parents(".img-info").remove();

				});
			}
		}
	</script> 
</body>
</html>